<template>
  <div ref="el" style="width: 100vw; height: 100vh"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Graphics, GraphicsPath } from 'pixi.js'
import { Container } from '@/tetap-cut'

const el = ref<HTMLDivElement>()

onMounted(async () => {
  if (!el.value) return
  const app = new Container(el.value)

  // Wait for the Renderer to be available
  await app.init({
    resizeTo: el.value || window,
    preference: 'webgpu',
    antialias: true,
    webgpu: {
      backgroundColor: '0xffffffff'
    }
  })

  // 绘制一个100x100的矩形
  const graphics = new Graphics()
  graphics.stroke({
    width: 1,
    alignment: 1,
    color: 0xff0000
  })
  graphics.beginPath()
  graphics.moveTo(0, 0)
  graphics.lineTo(100, 0)
  graphics.lineTo(100, 100)
  graphics.lineTo(0, 100)
  graphics.closePath()
  graphics.stroke()
  const svgpath = new GraphicsPath('M150 0 L75 200 L225 200 Z')
  graphics.beginPath()
  graphics.path(svgpath)
  graphics.closePath()
  graphics.fill(0xff0000)
  app.addChild(graphics)
})
</script>

<style lang="scss" scoped></style>
